<template>
  <div class="dialog-container">
    <el-dialog
      :title="
        dialogType == 'add'
          ? '新增权责事项'
          : dialogType == 'detail'
          ? '权责事项详情'
          : '修改权责事项'
      "
      :visible="dialogVisible"
      width="60%"
      custom-class="custom-dialog"
      @opened="initData"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dataForm"
        class="dialog-form"
        :rules="rules"
        label-width="110px"
        size="mini"
        :disabled="dialogType == 'detail'"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门" prop="deptName">
              <el-input readonly v-model="dataForm.deptName" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="margin_left">
          <el-col :span="12"
            ><el-form-item label="权责清单" prop="threeType" class="threeType"
              ><el-input
                v-model="dataForm.categoryCompleteName"
                ref="threeType"
                placeholder="请输入权责清单"
                @focus="openThreeType"
                maxlength="255" /></el-form-item
          ></el-col>
          <!-- <el-col :span="6"
            ><el-button size="mini" class="submit-btn" @click="openThreeType"
              >选择清单</el-button
            ></el-col
          > -->
        </el-row>
      </el-form>
      <div v-if="dialogType !== 'detail'" slot="footer">
        <el-button
          :loading="saveLoading"
          class="operation-btn blue"
          size="mini"
          type="primary"
          @click="handleSave"
          >保存</el-button
        >
        <el-button size="mini" class="operation-btn grey" @click="closeDialog"
          >取消</el-button
        >
      </div>
    </el-dialog>
    <!-- 三级分类弹窗 -->
    <ThreeTypeDialog
      :dialogVisible="ThreeTypeDialogVisible"
      @closeDialog="ThreeTypeDialogVisible = false"
      @threeTypeMsg="threeTypeMsg"
    />
  </div>
</template>

<script>
import { addDeptCategory } from "@/api/system/dept";
import ThreeTypeDialog from "@/views/casedeal/components/threeTypeDialog";
import { industryArea } from "@/api/case";
export default {
  name: "AddDeptCategoryDialog",
  components: {
    ThreeTypeDialog,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogType: {
      type: String,
      default: "detail",
    },
    obj: {
      type: Object,
      default: null,
    },
    deptId: {
      type: String,
      default: "",
    },
    deptName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      categoryDcaCodeArr: [],
      categorySupCodeArr: [],
      categorySubCodeArr: [],
      ThreeTypeDialogVisible: false,
      dataForm: {
        deptId: "",
        deptName: "",
        categoryDcaCode: "",
        categorySupCode: "",
        categorySubCode: "",
        categoryDcaName: "",
        categorySupName: "",
        categorySubName: "",
      },
      saveLoading: false,
      rules: {
        categoryDcaCode: [
          { required: true, message: "请选择行业类型", trigger: "change" },
        ],
        categorySupCode: [
          { required: true, message: "请选择大类", trigger: "change" },
        ],
        categorySubCode: [
          { required: true, message: "请选择小类", trigger: "change" },
        ],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 初始化
    initData() {
      this.dataForm.deptId = this.deptId;
      this.dataForm.deptName = this.deptName;
      this.getCategoryDcaCode();
    },
    // 关闭
    closeDialog() {
      this.$emit("closeDialog");
      this.clearData();
    },

    // 打开三级分类的弹窗
    openThreeType() {
      this.$bus.$emit("remarks")
      this.ThreeTypeDialogVisible = true;
    },

    threeTypeMsg(data) {
      this.dataForm.categoryCompleteName = data.categoryCompleteName;
      this.dataForm.categoryCode = data.code;
      this.dataForm.categoryName = data.name;
    },

    // 保存
    handleSave() {
      this.$refs["form"].validate((valid) => {
        if (!this.dataForm.categoryCompleteName) {
          this.$message.warning("请选择权责清单");
        } else if (valid) {
          addDeptCategory(this.dataForm)
            .then((res) => {
              this.$message.success("保存成功");
              this.$emit("flushPage");
              this.$emit("closeDialog");
              this.clearData();
            })
            .catch(() => {
              this.$message.error("保存失败");
            });
        }
      });
    },
    // 清空数据
    clearData() {
      this.dataForm = {
        deptId: "",
        deptName: "",
        categoryDcaCode: "",
        categorySupCode: "",
        categorySubCode: "",
      };
      this.$refs["form"].clearValidate();
    },
    // 获取行业领域
    getCategoryDcaCode() {
      industryArea({ parentId: 0 }).then((res) => {
        this.categoryDcaCodeArr = res.rows;
      });
    },
    // 获取大类
    getCategorySupCode(val) {
      industryArea({ parentId: val }).then((res) => {
        this.categorySupCodeArr = res.rows;
      });
    },
    // 获取小类
    getCategorySubCode(val) {
      industryArea({ parentId: val }).then((res) => {
        this.categorySubCodeArr = res.rows;
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.threeType {
  margin-left: 30px;
}
</style>
